<template>
    <div>
        <h3>房型列表</h3>
        <div>
            房型名称:
            <input type="text" v-model="Info.HouseTypeName">
            房型价格:
            <input type="text" v-model="Info.HousePrice">
            房型面积:
            <input type="text" v-model="Info.MinArea">-<input type="text" v-model="Info.MaxArea">
            <input type="button" value="查询" @click="show" class="btn btn-primary">
        </div>
        <table class="table table-bordered">
            <tbody >
                <tr class="bg-primary">
                    <td>房型编号</td>
                    <td>房型名称</td>
                    <td>房型图片</td>
                    <td>房型价格</td>
                    <td>房型面积</td>
                    <td>是否有窗</td>
                    <td>是否有早饭</td>
                    <td>载客量</td>
                    <td>创建时间</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.HouseTypeId" align="center">
                    <td>{{ item.HouseTypeId }}</td>
                    <td>{{ item.HouseTypeName }}</td>
                    <td><img :src="item.HousePhoto" alt="" width="80" height="50"></td>
                    <td>{{ item.HousePrice }}</td>
                    <td>{{ item.HouseArea }}</td>
                    <td>{{ item.InWin==1?'有窗':'无窗' }}</td>
                    <td>{{ item.IsBreakfast==1?'含早餐':'不含早餐' }}</td>
                    <td>{{ item.PeopleNum }}</td>
                    <td>{{ moment(item.CreateTime).format("YYYY-MM-DD") }}</td>
                    <td>{{ item.State==1?'启用':'禁止' }}</td>
                    <td>
                        <input type="button" value="删除" @click="del(item.HouseTypeId)" class="btn btn-danger">
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <span>共{{ data.TotalCount }}行</span>
            <span>共{{ data.TotalPage }}行</span>
            <span>第{{ Info.PageIndex }}/{{ data.TotalPage }}页</span>

            <input type="button" value="首页" @click="gopage(1)">
            <input type="button" value="上一页" @click="gopage(Info.PageIndex-1)">
            <span v-for="item in data.TotalPage" @click="gopage(item)">{{ item }}</span>
            <input type="button" value="下一页" @click="gopage(Info.PageIndex+1)">
            <input type="button" value="尾页" @click="gopage(data.TotalPage)">
            <input type="number" v-model="Info.PageIndex">
            <input type="button" value="跳转" @click="gopage(Info.PageIndex)">
            <select v-model="Info.PageSize" @change="show">
                <option :value="item" v-for="item in arr">每页{{ item }}条</option>
            </select>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRoute, useRouter } from 'vue-router';
import { idText } from 'typescript';
const Route = useRoute();
const Router = useRouter();

let arr:any=ref([2,4,6])
let Info:any=reactive({
    PageIndex:1,
    PageSize:2,
    HouseTypeName:'',
    HousePrice:'',
    MinArea:'',
    MaxArea:''
})
let data:any=reactive({
    TotalCount:0,
    TotalPage:0,
    list:[]
})
onMounted(()=>{
    getlist();
})
const gopage=(num:any)=>{
    if(num<1)
    {
        num=1;
        return;
    }
    if(num>data.TotalPage)
    {
        num=data.TotalPage;
        return;
    }
    Info.PageIndex=num;
    getlist();
}
const show=()=>{
    Info.PageIndex=1;
    getlist();
}
const getlist=()=>{
    axios({
        url:'/api/House/GetHousesTypeList',
        method:'get',
        params:Info
    })
    .then((res)=>{
        console.log(res);
        Object.assign(data,res.data);
    })
    .catch((err)=>{
        console.log(err);
        
    })
}
const del=(HouseTypeId:any)=>{
    let f=confirm("是否删除");
    if(f){
        axios({
            url:'/api/House/DelHouseType',
            method:'delete',
            params:{
                HouseTypeId:HouseTypeId
            }
        })
        .then((res)=>{
            console.log(res);
            if(res.data>0)
            {
                alert("删除成功");
                getlist();
            }
            else{
                alert("删除失败");
                return;
            }
        })
        .catch((err)=>{
            console.log(err);
            
        })
    }
}



</script>

<style scoped>
span{
    margin: 0 5px;
}
</style>